//获取三个显示，小时，分钟，秒钟的span区域元素
var oTxts = document.querySelectorAll("span")
//获取 start pause clear 的三个按钮元素
var oBtns = document.querySelectorAll("button");
var count = 0; //设置计数值，初始化为0
var timer = null; //标记定时器

function start() {
  timer = setInterval(function () { //开启定时器
    count++; //计数值循环加1
    var H = display(parseInt(count / 3600)); //小时，使用perseInt方法取整
    var M = display(parseInt(count % 3600 / 60)); //分钟
    var S = display(parseInt(count % 60)); //秒钟
    oTxts[0].innerHTML = H; //将内容写到相应的区域
    oTxts[1].innerHTML = M;
    oTxts[2].innerHTML = S;
  }, 1000);
}

function pause() {
  clearInterval(timer); //关闭定时器
}

function clear() {
  clearInterval(timer); //关闭定时器
  count = 0; //总计数值清空
  oTxts[0].innerHTML = "0 0"; //恢复初始状态
  oTxts[1].innerHTML = "0 0";
  oTxts[2].innerHTML = "0 0";
}

function display(n) { //要是小于10，则更改显示样式
  if (n < 10) {
    return "0 " + n;
  } else {
    return String(n).split('')[0] + " " + String(n).split('')[1];
  }
}

oBtns[0].onclick = start
oBtns[1].onclick = pause
oBtns[2].onclick = clear